<script>
import { ref, computed } from 'vue';
import HomePanel from './HomePanel.vue'
import { findBrandAPI } from '@/apis/home.js'

export default {
  components: {
    HomePanel
  },
  setup() {
    const data = ref([])
    const pageSize = ref(5) // 每页显示的数量
    // 定义请求方法
    const getBrandList = async () => {
      const res = await findBrandAPI()
      data.value = res.result
    }
    getBrandList()
    
    // 计算属性分页数据
    const paginatedData = computed(() => {
      let pages = [];
      for (let i = 0; i < data.value.length; i += pageSize.value) {
        pages.push(data.value.slice(i, i + pageSize.value));
      }
      return pages;
    });
    return {
      data,
      paginatedData
    };
    
  }
};
</script>

<template>
  <HomePanel title="热门品牌" sub-title="国际经典 品质保证">
    <!--默认插槽 内容-->
    <el-carousel height="305px">
      <el-carousel-item class="brand-list" v-for="(item,index) in paginatedData" :key="index">
        <div class="goods-list">
          <ul>
            <li v-for="list in item" :key="list.id">
              <div class="pic" :aria-label="list.name">
                <img :src="list.picture" />
              </div>
            </li>
          </ul>
        </div>
      </el-carousel-item>
    </el-carousel>
  </HomePanel>
</template>

<style lang="scss" scoped>
.brand-list{
  :deep() {
    .el-carousel__indicator--horizontal{}
  }
}
.goods-list{
  width: 100%;
  ul{
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    li{
      width: 20%;
      padding: 10px;
      .pic{
        width: 100%;
        height: 293px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }
}
</style>